<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../../jquery-1.12.4.min.js"></script>
</head>

<body>
    <script>
        //传统js输出模板，通常的写法：
        //     $('#result').append(
        //         'There are <b>' + basket.count + '</b> ' +
        //         'items in your basket, ' +
        //         '<em>' + basket.onSale +
        //         '</em> are on sale!'
        //     );

        //     //es6写法【分析：原有的加号是拼接变量，而现在是${和}配合来进行拼接。同时最外层必须有单个的反引号】
        //     $('#result').append(`
        //      There are <b>${basket.count}</b> items
        //       in your basket, <em>${basket.onSale}</em>
        //      are on sale!
        //    `);

        //【1】多行字符串
        console.log(`string text line 1 
        string text line 2`);
        //【2】字符串和变量拼接
        var name = "Bob",
            time = 'today';
        var res = `Hello ${name}, how are you ${time}?`;
        console.log(res);
        //【3】模板字符串，所有的空格和缩进都会被保留在输出之中
        $('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);
        //【4】大括号内部可以放入任意的js表达式，可以进行运算，以及引用对象属性
        var x = 1;
        var y = 2;

        var a = `${x} + ${y} = ${x + y}`
            // "1 + 2 = 3"
        console.log(a);
        var b = `${x} + ${y * 2} = ${x + y * 2}`
            // "1 + 4 = 5"
        console.log(b);
        var obj = {
            x: 1,
            y: 2
        };
        var c = `${obj.x + obj.y}`;
        console.log(c);
        // 3
    </script>
</body>

</html>